<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<table border="1">
				<tr>
					<td>Index</td>
					<td>编号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
				<tr v-for="(product, index) in products">
					<td>{{index}}</td>
					<td>{{product.id}}</td>
					<td>{{product.name}}</td>
					<td>{{product.price}}</td>
				</tr>
				
			</table>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				products:[
					{ id:1, name:"笔记本电脑", price:5000 },
					{ id:2, name:"手机", price:3000 },
					{ id:3, name:"电视", price:7000 }
				]
			}
		});
	</script>

</html>